<template>
  <div>
    <h1>User页</h1>

    <div class="navigate"
         @click="navigate">首页</div>
  </div>
</template>
<script lang="ts">
import {
  ComponentInternalInstance,
  getCurrentInstance,
  defineComponent
} from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default defineComponent({
  name: 'User',

  setup () {
    const router = useRouter()
    const route = useRoute()
    // const { proxy } = getCurrentInstance() as ComponentInternalInstance
    // console.log('proxy', proxy as any)

    function navigate () {
      // 路由跳转有两种方式：
      // 1.使用useRouter
      // 2.使用getCurrentInstance获取proxy，即vue2中的this，然后像vue2一样调用路由
      router.push(`/?id=${route.query.id}`)
      // (proxy as any).$router.push(`/?id=${(proxy as any).$route.params.id}`)
    }

    return {
      navigate
    }
  }
})
</script>
